<template>
	<div>
		 <button @click="get1">get1</button><br/>
		 <button @click="get2">get2</button><br/>
		 <button @click="get3">get3</button><br/>
		 <button @click="get4">get4</button><br/> 
		 <button @click="post1">post1</button><br/>
		 <button @click="sendObj">sendObj</button><br/>
		 <button @click="sendArray">传递数组</button><br/>
         <button @click="sendArray2">传递数组2</button><br/>
	</div>
</template>

<script>
 import axios from 'axios'
	
export default{
	name:"AxiosComponet",
	data(){
		return {
			msg:"AxiosComponet",
		}
	},
	methods:{
		get1(){
			axios.get("http://localhost:9090/esp/get")
		     .then(response=>{
				  console.log(response.data);
				  console.log(response.data.name);
			 })
		
		},
		get2(){
			axios.get("http://localhost:9090/esp/get1?id=wwwq")
			.then(response =>{
				console.log(response.data.id);
			})
		},
		// 方式2：Query参数
		get3(){
			axios.get("http://localhost:9090/esp/get1",{
				params:{
					id:"ssss"  //会转为 ?id=ssss
				}
			})
			.then(response =>{
				console.log(response.data.id);
			})
		},
		// 方式1：URL路径参数
		get4(){
			const username = "zhangsan";
			axios.get(`http://localhost:9090/esp/get2/${username}`)
			.then(response =>{
				console.log(response.data);
			})
		},
		post1(){
			 // 1. 创建一个 URLSearchParams 对象
			   const params = new URLSearchParams();
			   // 2. 使用 .append() 方法添加参数
			   params.append('firstName', 'Fred');
			   params.append('lastName', 'Flintstone');
					   
			axios.post("http://localhost:9090/esp/post1",params)
				.then(response =>{
				console.log(response.data);
			})
		},
		sendObj(){
		       var user = {
			      id: 1,
			      name: "张三",
			      age: 25,
			      email: "zhangsan@test.com"
			    };
				// 直接传递对象（Axios会自动转为JSON）
				  axios.post("http://localhost:9090/esp/sendObj", user)
				  .then(response =>{
						  console.log("对象响应：", response.data);
				  }).catch (function(err) {
				    console.error("对象请求失败：", err);
				  })
		},
		sendArray(){
		   // 方式1：POST请求体传递纯数组
			const ids = [101, 102, 103];
			axios.post("http://localhost:9090/esp/pure",ids)
			.then(response =>{
				console.log(response.data)
			}).catch(function(err){
				console.log("报错了"+err)
			})
		},
		sendArray2(){
			const ids = [101, 102, 103];
			//方式2：POST请求体传递包装数组
			axios.post("http://localhost:9090/esp/wrapped", {
			  ids: ids,
			  names: ["张三", "李四"]
			})
			.then(response =>{
				console.log(response.data)
			}).catch(function(err){
				console.log("报错了"+err)
			})
		},
		 // 方式3：GET请求传递数组（需要qs处理序列化）
		sendArray3(){
			const ids = [101, 102, 103];
			//方式2：POST请求体传递包装数组
			axios.post("http://localhost:9090/esp/wrapped", {
			  ids: ids,
			  names: ["张三", "李四"]
			})
			.then(response =>{
				console.log(response.data)
			}).catch(function(err){
				console.log("报错了"+err)
			})
		},
		
		
		
	},
	 
       
 
	
}
</script>

<style>
</style>
 